<template>
    <page-view>
        <page-header title="购物车" :showBack="true"></page-header>
        
            <tabs v-model:active="tabIndex" animated>
                <tab title="购物车列表" >
                    <swipe-cell  >
                        <div class="content-box">
                            <div class="content-detail">
                    <checkbox-group v-model="selectFoodList" @change="selectSingleFood($event)">
                        <card
                        v-for="item in shopCarList" :key="item.id"
                            :price="item.count*item.foodInfo.price"
                            :desc="item.foodInfo.food_desc"
                            :title="item.foodInfo.food_name"
                            class="goods-card"
                            :thumb="BaseURL+item.foodInfo.food_img"
                        >
                        <template #footer>
                            <stepper v-model="item.count" theme="round" button-size="20" disable-input @plus="foodCountPlus(item.fid,)" />
                            <checkbox :name="item" checked-color="#ee87a9">勾选商品</checkbox>
                        </template>
                        <template #right>
                            <Button square text="删除" type="danger" class="delete-button" @click="deleteMyShopCartFoodById(item.id)"/>
                        </template>
                        
                        </card>
                        </checkbox-group>
                        <list
                            v-model:loading="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                            >
                        </list>
                            </div>
                            <div class="content-bar">
                                <submit-bar class="submit-bar" :price="allMoney" button-text="提交订单" @submit="onSubmit">
                                <checkbox v-model="isSelectAll" checked-color="#ee0a24" @click="checkAll">全选</checkbox>
                                <!-- <template #tip>
                                    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
                                </template> -->
                            </submit-bar>
                            </div>
                        </div>
                    </swipe-cell>   
                </tab>
                <tab title="收货地址" >
                    <address-list
                        v-model="chosenAddressId"
                        :list="list"
                        :disabled-list="disabledList"
                        disabled-text="以下地址超出配送范围"
                        default-tag-text="默认"
                        @add="$router.push({name:'AddAddress'})"
                        
                        />
                        <!-- @edit="onEdit" -->
                </tab>
            </tabs>
      
    </page-view>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import { Toast, Tab, Tabs,List,SwipeCell,Card,Button,Stepper,Dialog,SubmitBar,CheckboxGroup,Checkbox,AddressList    } from 'vant'
import { onMounted, reactive,toRefs,computed ,ref} from 'vue'
import api from '../utils/api'
export default {
  components: { PageHeader,Tab, Tabs,List ,SwipeCell,Card,Button,Stepper ,SubmitBar,CheckboxGroup,Checkbox,AddressList},
    setup () {

        let info=reactive({
            tabIndex:0,
            loading:false,
            finished:false,
            shopCarList:[],
            pageCount: 0,
            pageEnd: 0,
            pageStart: 1,
            totalCount: 0,  
        })

onMounted(()=>{
    getListByPage(info.pageStart);
    getMyAddress();
})
const getListByPage=async(pageIndex=1)=>{
    info.loading=true;
    let result=await api.shopCarInfo.getListByPage(pageIndex)
    console.log(result,"从服务器获取到的购物车信息")
    info.pageCount=result.pageCount
    info.pageEnd=result.pageEnd
    info.pageStart=result.pageStart
    info.totalCount=result.totalCount
    // info.pageIndex=result.pageIndex
    info.shopCarList=result.listData
    info.loading=false;//加载完之后需要手动关闭
    info.finished=info.pageStart >=info.pageEnd
    // console.log(info,info.shopCarList)

}

//下滚懒加载
function onLoad(){
    if( info.pageStart <info.pageEnd){
        getFood(info.pageStart+1)
    }
}

const onSubmit = () => Toast('点击按钮');
const onClickLink = () => Toast('修改地址');





//添加数量
const  foodCountPlus= async(fid)=>{    
        // await api.shopCarInfo.addToShopCart({
        //     fid:fid,
        //     count:1,
        // })
}

//删除
function deleteMyShopCartFoodById(id){
    // Dialog.confirm({
    //         title:'确认删除',
    //         message:'是否确认删除这个商品?'
    //     }).then(async()=>{
    //         let index=await api.shopCarInfo.deleteMyShopCartFoodById(id)
    //         console.log(index)
    //     }).catch(()=>{

    //     })

}

//结算模块
const infoSelectFood=reactive({
    isSelectAll:false,
    selectFoodList:[],
    allMoney:0
})
//全选点击事件
function checkAll(){
    if(infoSelectFood.isSelectAll===true){
        infoSelectFood.selectFoodList=info.shopCarList
    }else{
        infoSelectFood.selectFoodList=[]
    }
}
//勾选商品的change事件
function selectSingleFood(event){
   if(infoSelectFood.selectFoodList.length===info.shopCarList.length){
       infoSelectFood.isSelectAll=true
   }else{
        infoSelectFood.isSelectAll=false
   }
}
//结算
computed(()=>{
    console.log(infoSelectFood.selectFoodList,161)
    let total=infoSelectFood.selectFoodList.reduce((pre,cur)=>{
        console.log(pre,pre)
         console.log(cur,cur)
         console.log("=======")
            return 20
    })
    return total
})

//地址
 const chosenAddressId = ref('1');
 const addressInfo=reactive({
     list:[]
 })
    const list = [
      {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isDefault: true,
      },
      
    ];
    const disabledList = [
      {
        id: '3',
        name: '王五',
        tel: '1320000000',
        address: '浙江省杭州市滨江区江南大道 15 号',
      },
    ];

const getMyAddress=async()=>{
    let result=await api.addressInfo.getMyAddressInfoList()
    // console.log(result,"地址")
}

        return {
            ...toRefs(info),
            foodCountPlus,
            deleteMyShopCartFoodById,
            onLoad,
            onSubmit,
            onClickLink,
            selectSingleFood,//单选
            checkAll,//全选
            // allMoney,//全部金额
        ...toRefs(infoSelectFood),
        ...toRefs(addressInfo),
      disabledList,
      chosenAddressId,
        }
    }
}




</script>

<style lang="scss" scoped>
.content-box{
    height: 100%;
    display: flex;
    flex-direction: column;
    .content-detail{
        flex: 1;
    overflow: auto;
    padding-bottom: 50px;
    }

    .content-bar{
        height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: auto;
    }
    .content-bar>div{
        position: static;
        
    }
}
 .goods-card {
    margin: 0;
    background-color: white;
  }
  .delete-button {
    height: 100%;
  }




::v-deep .van-address-list__bottom{
    position: relative;
    background-color: none;
}

</style>